import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button ,Modal,Row,Col,message,Select,Popconfirm,Divider,Pagination,DatePicker } from 'antd';
import styles from './index.less';
import {TimeSpan} from '../../utils';
import moment from "moment";
var timeout = null;
const Pages = ({ account, dispatch, loading }) => {
    const columns = [
        {
            title: '用户ID',
            dataIndex: 'loginId',
        },
        {
            title: '登录账号',
            dataIndex: 'userName',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render:text => text && text == 1?"在用":"停用",
        },
        {
            title: '联系人',
            dataIndex: 'aliasName',
        },
        {
            title: '联系人电话',
            dataIndex: 'phone',
        },
        {
            title: '上次登录时间',
            dataIndex: 'lastLoginTime',
            render:text =>TimeSpan(text),
        },
        {
            title: '操作',
            dataIndex: 'option',
            render:(text,record) =><a onClick={()=>{
                dispatch({type:"account/save",payload:{record:record,view:true}});
            }}>修改</a>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...account} loading={loading.global}/>
            <Table columns={columns}
                rowKey={id => id.loginId}
                pagination={false}
                loading={loading.global}
                size="small"
                dataSource={account.getAccountData || null} />
            <Pagination current={account.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={account.total}
                onChange={pages => { !loading.global && dispatch({type:'account/save',payload:{pages:pages}});}}/>
        </div>
    );
};

class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            username: '',
            phone :'',
            userName:"",
            aliasName:'',
            phoneADD:'',
            emailAddr:'',
            pwd:"",
            pwdTow:"",
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"account/getAccount",payload:{
            username: '',
            phone :'',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){

        let { pages,record,view ,dispatch,loading} = this.props;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.username } placeholder="用户名" style={{margin:10,width:256}}
                    onChange={e=>this.setState({username:e.target.value})}/>
                <Input value={this.state.phone } placeholder="手机号" style={{margin:10,width:256}}
                    onChange={e=>this.setState({phone:e.target.value})} />
                <Button type='primary' onClick={()=>{
                    let {username,phone} = this.state;
                    this.props.dispatch({type:"account/getAccount",payload:{
                        username: username,
                        phone :phone,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button style={{margin:10}} onClick={()=>{
                    dispatch({type:"account/save",payload:{view:true,record:{}}});
                    this.setState({
                        userName:"",
                        aliasName:'',
                        phoneADD:'',
                        emailAddr:'',
                        pwd:"",
                        pwdTow:"",
                        err:false,
                    });
                }}>新增系统账户</Button>

                <Modal
                    title={record.loginId?"修改系统账户":"添加系统账户"}
                    visible={view}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {userName,aliasName,phoneADD,emailAddr,err,pwd} = this.state;
                        if(record.loginId && userName && aliasName && phoneADD && emailAddr){
                            let body ={
                                userName: userName,
                                aliasName:aliasName,
                                phone:phoneADD,
                                emailAddr:emailAddr,
                            };
                            body.loginId = record.loginId;
                            dispatch({type:"account/putAccount",payload:body});
                        }else{
                            if(userName && aliasName && phoneADD && emailAddr && pwd && !err){
                                let body ={
                                    userName: userName,
                                    aliasName:aliasName,
                                    phone:phoneADD,
                                    emailAddr:emailAddr,
                                    userPassword:pwd,
                                };

                                dispatch({type:"account/postAccount",payload:body});
                            }else{
                                message.error('请填写完整！');
                            }
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"account/save",payload:{view:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>用户登录名:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({userName: e.target.value})}
                                value={this.state.userName}
                                placeholder="用户登录名"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>联系人:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({aliasName: e.target.value})}
                                value={this.state.aliasName}
                                placeholder="联系人"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>联系电话:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({phoneADD: e.target.value})}
                                value={this.state.phoneADD}
                                placeholder="联系电话"/>
                        </Col>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>邮箱地址:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({emailAddr: e.target.value})}
                                value={this.state.emailAddr}
                                placeholder="邮箱地址"/>
                        </Col>
                        {
                            !record.loginId && <div>
                                <Col span={6}><span><span style={{color:'red'}}>*</span>密码:</span></Col>
                                <Col span={14}>
                                    <Input type="password" style={{width: 200, marginBottom: 10, marginTop: -4}}
                                        onChange={e => this.setState({pwd: e.target.value})}
                                        value={this.state.pwd}
                                        placeholder="密码"/>
                                </Col>
                                <Col span={6}><span><span style={{color:'red'}}>*</span>重复密码:</span></Col>
                                <Col span={14}>
                                    <Input type="password" style={{width: 200, marginBottom: 10, marginTop: -4}}
                                        onChange={e => {
                                            this.setState({pwdTow: e.target.value});
                                            let value = e.target.value;
                                            clearTimeout(timeout);
                                            timeout = setTimeout(()=>{
                                                if(value == this.state.pwd){
                                                    this.setState({err:false});
                                                }else{
                                                    this.setState({err:true});
                                                }
                                            },500);
                                        }}
                                        value={this.state.pwdTow}
                                        placeholder="重复密码"/>
                                    <div style={{color:'red',display:this.state.err?'block':'none'}}>两次输入密码不一致</div>
                                </Col>
                            </div>
                        }
                    </Row>
                </Modal>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.loginId !== this.props.record.loginId) {
            let {userName,aliasName,phone,emailAddr} = nextProps.record;
            this.setState({
                userName: userName,
                aliasName:aliasName,
                phoneADD:phone,
                emailAddr:emailAddr,
            });
        }
        if(nextProps.pages !== this.props.pages){
            let {username,phone} = this.state;
            this.props.dispatch({type:"account/getAccount",payload:{
                username: username,
                phone :phone,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}


Pages.propTypes = {
    account: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ account, loading }) => ({ account, loading }))(Pages);
